<template>
	<view>
		<view class="graphic-nav" :style="{ 
			background: value.backgroundColor, 
			paddingLeft: value.paddingLeftRight * 2 + 'rpx', 
			paddingRight: value.paddingLeftRight * 2 + 'rpx', 
			paddingTop: value.paddingTopBottom * 2 + 'rpx', 
			paddingBottom: value.paddingTopBottom * 2 + 'rpx',
			borderTopLeftRadius: value.borderTopLeftRadius * 2 + 'rpx',
			borderTopRightRadius: value.borderTopRightRadius * 2 + 'rpx',
			borderBottomLeftRadius: value.borderBottomLeftRadius * 2 + 'rpx',
			borderBottomRightRadius: value.borderBottomRightRadius * 2 + 'rpx'
		}">
			<block v-if="value.scrollSetting == 'horizontal-scroll'">
				<scroll-view scroll-x="true" class="nav-scroll">
					<view v-for="(item, index) in value.list" :key="index" class="text-item" @click="redirectTo(item.link)">
						<image v-if="item.imageUrl" :src="$util.img(item.imageUrl)" :style="{ width: value.imageScale + '%' }" mode="aspectFit"></image>
						<text class="ns-font-size-base" v-if="item.title" :style="{ color: value.textColor }">{{ item.title }}</text>
					</view>	
				</scroll-view>
			</block>
			<block v-else>
				<view class="nav-no-scroll">
					<view v-for="(item, index) in value.list" :key="index" class="text-item" @click="redirectTo(item.link)" :style="{padding: '0 ' + value.padding * 2 + 'rpx'}">
						<image v-if="item.imageUrl" :src="$util.img(item.imageUrl)" :style="{ width: value.imageScale + '%'}" mode="widthFix"></image>
						<text class="ns-font-size-base" v-if="item.title" :style="{ color: value.textColor }">{{ item.title }}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	// 图文导航
	export default {
		name: 'diy-graphic-nav',
		props: {
			value: {
				type: Object
			}
		},
		data() {
			return {};
		},
		created() {
		},
		computed: {
			padding() {
				return this.value.padding == 0 ? 8 : this.value.padding
			}
		},
		methods: {
			redirectTo(link) {
				this.$util.diyRedirectTo(link);
			}
		}
	};
</script>

<style>
	.graphic-nav .nav-no-scroll{
		/* padding: 10rpx 0; */
		display: flex;
		flex-wrap: wrap;
	}

	.graphic-nav .nav-no-scroll .text-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-around;
		align-content: center;
		align-items: center;
		/* padding: 20rpx; */
		box-sizing: border-box;
	}

	.graphic-nav .nav-no-scroll .text-item image {
		/* margin-bottom: 10rpx; */
		width: 70rpx;
		height: 90rpx;
	}

	.graphic-nav .nav-no-scroll .text-item text {
		display: block;
		height: 50rpx;
		line-height: 50rpx;
	}
	
	.graphic-nav .nav-scroll{
		white-space: nowrap;
		width: 100%;
	}
	.graphic-nav .nav-scroll .text-item{
		display: inline-block;
		width: 160rpx;
		text-align: center;
	}
	.graphic-nav .nav-scroll .text-item image{
		width: 80rpx;
		height: 80rpx;
	}
	.graphic-nav .nav-scroll .text-item text{
		display: block;
	}
</style>
